import React, { useState, useEffect } from 'react';
import './ydjs.css';
import { useNavigate } from 'react-router-dom';
import { NavBar } from 'antd-mobile';
import axios from 'axios'
import { CartO } from '@react-vant/icons';

const Ydjs = () => {
    const navigate = useNavigate();

    // 处理第一个 li 的点击事件
    const [isFirstLiSelected, setIsFirstLiSelected] = useState(true);
    const handleFirstLiClick = () => {
        setIsFirstLiSelected(true);
        setIsSecondLiSelected(false);
        setIsThirdLiSelected(false);
    };

    //列表数据
    const [list, setlist] = useState([])
    const getlist = () => {
        axios.get(`http://localhost:3000/chen_getlists`).then(res => {
            setlist(res.data.data)
        })
    }
    useEffect(() => {
        getlist()
    }, [])

    // 处理第二个 li 的点击事件
    const [isSecondLiSelected, setIsSecondLiSelected] = useState(false);
    const [sortOrder, setSortOrder] = useState(1); // 1 表示升序，-1 表示降序
    const handleSecondLiClick = () => {
        setIsFirstLiSelected(false);
        setIsSecondLiSelected(true);
        setIsThirdLiSelected(false);
        setSortOrder(sortOrder === 1 ? -1 : 1);//切换排序的方式
    };
    //排序
    const sortedList = [...list].sort((a, b) => {
        return sortOrder * (a.xprice - b.xprice);
    });

    // 处理第三个 li 的点击事件
    const [isThirdLiSelected, setIsThirdLiSelected] = useState(false);
    const handleThirdLiClick = () => {
        setIsFirstLiSelected(false);
        setIsSecondLiSelected(false);
        setIsThirdLiSelected(true);
    };
    // 随机选择四个列表项
    const sisilist = React.useMemo(() => {
        if (list.length === 0) return [];
        const shuffled = list.slice();
        for (let i = shuffled.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }
        return shuffled.slice(0, 4);
    }, [list]);
    // 根据选中状态决定渲染的数据
    const renderList = isFirstLiSelected
        ? list
        : isSecondLiSelected
            ? sortedList
            : sisilist;

    return (
        <div style={{background:'white',width:'100%',height:'100%'}}>
            <NavBar onBack={() => navigate(-1)} className='yan'>运动健身</NavBar>
            <ul className='yxhw-ul'>
                <li className={isFirstLiSelected ? 'selected' : ''} onClick={handleFirstLiClick}>
                    综合
                </li>
                <li className={isSecondLiSelected ? 'selected' : ''} onClick={handleSecondLiClick}>
                    价格<span>↑</span><span>↓</span>
                </li>
                <li
                    className={isThirdLiSelected ? 'selected' : ''}
                    onClick={handleThirdLiClick}
                >
                    上新
                </li>
            </ul>
            <div style={{position:"fixed",top:'1.7rem',left:'0',right:'0',bottom:'0',overflow:'auto'}}>
                {renderList.map((item, index) => {
                    return (
                        <div key={index} className='list-div4'>
                            <img src={item.img} alt="" className='list-img4' style={{
                                width: '2rem',
                                height: '2rem'
                            }} />
                            <div>
                                <p>{item.name}</p>
                                <p className='list-p4'>{item.name}{item.name}{item.name}</p>
                                <p className='list-p4' style={{display:'flex'}}>
                                    <span className='ydjs-span'>￥{item.xprice}</span>
                                    <CartO style={{color:'red',fontSize:'0.5rem'}} />
                                </p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    );
};

export default Ydjs;